/* 为body添加背景颜色 */
body{
	background-color:#f7f7f7;
}

/* 顶部通栏 */
.wjs_header{
	// border:1px solid gray;
	.row{
		>div{
			border-right:1px solid gray;
			border-top:1px solid gray;
			border-bottom:1px solid gray;
			height: 40px;
			text-align: center;
			line-height: 40px;
			a{
				color:gray;
				font-size:12px;
			}
			.header_register{
				color:white;
			}

		}
		&>div:nth-child(1){
			.code{
				display: none;
				top:25px;
				left:-20px;
				position: absolute;
			}
			a{
				position:relative;
			}
			a:hover{
				color:red;
				.code{
					display:block;
				}
			}
		}

	}
}

/* 导航的样式 */
.wjs-nav-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.wjs-nav-default .navbar-brand {
  color: #777;
  height: 80px;
  line-height:50px;
      .wjs-font{
          font-size:50px;
      }
      .wjsfont-logo{
        color:red;
      }
      .wjsfont-word{
        color:black;
      }
}
.wjs-nav-default .navbar-brand:hover,
.wjs-nav-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.wjs-nav-default .navbar-text {
  color: #777;
}
.wjs-nav-default .navbar-nav > li > a {
  color: #777;
  height: 80px;
  line-height:50px;
}
.wjs-nav-default .navbar-nav > li > a:hover,
.wjs-nav-default .navbar-nav > li > a:focus {
  // color: #333;
  background-color: transparent;
  border-bottom:3px solid red;
}
.wjs-nav-default .navbar-nav > .active > a,
.wjs-nav-default .navbar-nav > .active > a:hover,
.wjs-nav-default .navbar-nav > .active > a:focus {
  color: #555;
  // background-color: #e7e7e7;
  border-bottom:3px solid red;
}
.wjs-nav-default .navbar-nav > .disabled > a,
.wjs-nav-default .navbar-nav > .disabled > a:hover,
.wjs-nav-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.wjs-nav-default .navbar-toggle {
  border-color: #ddd;
  margin-top: 25px; 
}
.wjs-nav-default .navbar-toggle:hover,
.wjs-nav-default .navbar-toggle:focus {
  background-color: #ddd;
}
.wjs-nav-default .navbar-toggle .icon-bar {
  background-color: #888;
}
.wjs-nav-default .navbar-collapse,
.wjs-nav-default .navbar-form {
  border-color: #e7e7e7;
}
.wjs-nav-default .navbar-nav > .open > a,
.wjs-nav-default .navbar-nav > .open > a:hover,
.wjs-nav-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
@media (max-width: 767px) {
  .wjs-nav-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .wjs-nav-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .wjs-nav-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .active > a,
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .wjs-nav-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.wjs-nav-default .navbar-link {
  color: #777;
}
.wjs-nav-default .navbar-link:hover {
  color: #333;
}
.wjs-nav-default .btn-link {
  color: #777;
}
.wjs-nav-default .btn-link:hover,
.wjs-nav-default .btn-link:focus {
  color: #333;
}
.wjs-nav-default .btn-link[disabled]:hover,
fieldset[disabled] .wjs-nav-default .btn-link:hover,
.wjs-nav-default .btn-link[disabled]:focus,
fieldset[disabled] .wjs-nav-default .btn-link:focus {
  color: #ccc;
}


/* 轮播图 */
.wjs-banner-items{
    a:first-child{
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 410px;
      display:block;
    }
    .banner-img-a{
      background-image: url('../images/slide_01_2000x410.jpg');
    }
    .banner-img-b{
      background-image: url('../images/slide_02_2000x410.jpg');
    }
    .banner-img-c{
      background-image: url('../images/slide_03_2000x410.jpg');
    }
    .banner-img-d{
      background-image: url('../images/slide_04_2000x410.jpg');
    }
    a:last-child img{
      width: 100%;
      display:block;
    }
}

/* 服务区域布局内容 */
.wjs-service{
    padding-top: 40px;
    a{
      color:gray;
      &:hover{
        color:red;
      }
      .wjs-font{
        font-size:40px;
      }
    }

    /* 容器类 添加自己的样式 */
    .container{
      padding: 0 100px;
    }

    /* 找到col-md-4添加padding */
    .col-md-4{
      padding:20px 0;
    }
}

/* 预约界面 */
.wjs-book{
  border-top:1px solid gray;
  border-bottom:1px solid gray;
  padding:20px;
  
  /* 位为container添加padding */
  .container{
    padding:0 100px;
  }

  a:first-of-type{
    color:red;
    border-bottom:1px dashed red;
  }
  a:last-of-type{
    color:gray;
    &:hover{
      color:red;
    }
  }
}

/* 标签页-顶部的样式 */
.wjs-tabs {
  border-bottom: 1px solid #ddd;
}
.wjs-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.wjs-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  color:gray;
}
.wjs-tabs > li > a:hover {
  // border-color: #eee #eee #ddd;
  background-color:transparent;
  border-bottom:3px solid red;
}
.wjs-tabs > li.active > a,
.wjs-tabs > li.active > a:hover,
.wjs-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color:#f7f7f7;
  // background-color: #fff;
  // border: 1px solid #ddd;
  // border-bottom-color: transparent;
  border-bottom:3px solid red;
}
.wjs-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.wjs-tabs.nav-justified > li {
  float: none;
}
.wjs-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.wjs-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .wjs-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .wjs-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.wjs-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.wjs-tabs.nav-justified > .active > a,
.wjs-tabs.nav-justified > .active > a:hover,
.wjs-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .wjs-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .wjs-tabs.nav-justified > .active > a,
  .wjs-tabs.nav-justified > .active > a:hover,
  .wjs-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}

/* 优惠券的样式 */
.wjs_discount{
  display:block;
  height: 150px;
  // width:388px;
  position:relative;
  padding-right: 108px;
  /* 手指hover没有特殊外观 */
  text-decoration: none;
  /* 为伪元素 做的 体验 添加样式 */

  /* 阴影 围出盒子 */
  box-shadow: 3px 3px 6px gray;
  &::before{
    position:absolute;
    color:white;
    font-size:50px;
  }
  &:hover{
    text-decoration: none;
  }
  .content_left{
    // border:1px solid #0094ff;
    height: 100%;
    width: 100%;
      h4{
        color:gray;
        text-align:center;
        font-weight:700;
      }
      .left_message{
        /* 为 左右的 p标签 设置对其的方式 */
        .left_col{
          text-align:left;
        }
        .right_col{
          text-align:right;
        }

        p{
          color:gray;
          font-weight:900;
          font-size:12px;
          height:17px;
          overflow: hidden;
        }
      }
  }
  .content_right{
    // border:1px solid #0094ff;
    height: 100%;
    width: 108px;
    position:absolute;
    right:0px;
    top:0px;
    padding-top:20px;
    border-left:1px dashed gray;
      p{
        color:gray;
        text-align:center;
        font-weight: 700;
      }
      /* 使用伪元素 制作 圆角 */
      &::before{
        content: '';
        position:absolute;
        top:-10px;
        left:-10px;
        width: 20px;
        height: 20px;
        border-radius:50%;
        background-color:#f7f7f7;
        box-shadow:0 1px gray;
      }
      &::after{
        content: '';
        position:absolute;
        bottom:-10px;
        left:-10px;
        width: 20px;
        height: 20px;
        border-radius:50%;
        background-color:#f7f7f7;
        box-shadow:0 -1px gray;
      }
  }
  /* 添加额外的样式 */
  &.red{
    background-color:red;
    color:white;
    .content_right{
      border-left-color:white;
    }
    h4{
      color:white;
    }
    p{
      /* 使用important 直接 提升优先级到顶, 实际开发中 建议 少用 */
      color:white !important;
    }
  }
}



/* 新闻页 布局 */
.wjs_news{
  border-top:1px solid gray;
  border-bottom:1px solid gray;
  .row{
    /* 第一个区域的 h3标签布局 */
    h3{
      border-bottom:1px solid gray;
      text-align:center;
      padding-bottom: 20px;
      position:relative;
      &::after{
        content:'';
        position:absolute;
        width: 8px;
        height: 8px;
        border:1px solid gray;
        border-radius:50%;
        background-color:#f7f7f7;
        bottom:-4px;
        right:-4px;
      }
    }
  }
}

/* 微金所 新闻区域的 标签页布局 */
.wjs-news-tabs {
  /* 找到 作为线的元素 */
  position:relative;
    .line{
        width: 1px;
        height: 80%;
        border:1px dashed gray;
        position:absolute;
        left:25px;
        top:23px;
    }
}

.wjs-news-tabs > li {
  float: left;
  margin-bottom: -1px;
  width: 100%;
}
/* 媒体查询 */
@media screen and (max-width:768px){
    .wjs-news-tabs > li {
        // background-color:orange;
        width: 25%;
  }
}

.wjs-news-tabs > li > a {
  margin-right: 2px;
  line-height: 50px;
  display:block;
  width: 50px;
  height: 50px;
  border-radius:50%;
  background-color:#ccc;
  margin:20px 0;
  text-align:center;
  color:white;
  font-size:30px;
  padding: 0;
}
.wjs-news-tabs > li > a:hover {
  background-color:red;
}
.wjs-news-tabs > li.active > a,
.wjs-news-tabs > li.active > a:hover,
.wjs-news-tabs > li.active > a:focus {
  cursor: default;
  background-color:red;
}
.wjs-news-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.wjs-news-tabs.nav-justified > li {
  float: none;
}
.wjs-news-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.wjs-news-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .wjs-news-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .wjs-news-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.wjs-news-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.wjs-news-tabs.nav-justified > .active > a,
.wjs-news-tabs.nav-justified > .active > a:hover,
.wjs-news-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .wjs-news-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .wjs-news-tabs.nav-justified > .active > a,
  .wjs-news-tabs.nav-justified > .active > a:hover,
  .wjs-news-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}

/* 微金所 新闻区域 的 列表区域 */
.wjs-news-list{
  ul{
    padding-top:20px;
    li{
      padding:7px 0;
      a{
        color:gray;
        font-size:11px;
      }
    }
  }
}



/* 微金所 底部的布局 */
.wjs-footer{
  text-align:center;
  h3{
  }
  ul{
    display:inline-block;
    li{
      margin:0 20px;
      a{
        color:gray;
        font-size:70px;
        text-decoration:none;
      }
    }
  }
}